<template>
	<view class="container p-bottom">
		<view class="flow-list">
			<view v-if="goods_list.length">
				<view class="cart-edit-wrap dis-flex flex-x-end">
					<text v-if="action === 'complete'" @tap="switchAction" class="f-30" data-action="edit">编辑</text>
					<text v-if="action === 'edit'" @tap="switchAction" class="f-30" data-action="complete">完成</text>
				</view>
				<view v-for="(item, index) in goods_list" :key="index">
					<!--  -->
					<view class="dish-item dis-flex flex-y-center" :data-index="index" :style="item.txtStyle">
						<!-- 选择框 -->
						<view class="dish-item-radio" @tap="onChecked" :data-index="index">
							<label class="radio"><radio :checked="item.checked" color="#ff495e"></radio></label>
						</view>
						<view class="dish-item-wrp dis-flex flex-box">
							<!-- 商品图片 -->
							<navigator hover-class="none" :url="'../goods/index?goods_id=' + item.goods_id">
								<view class="dish-item-pic"><image mode="aspectFill" class="image" :src="item.goods_image"></image></view>
							</navigator>
							<!-- 商品信息 -->
							<view class="dish-item-info flex-box">
								<navigator hover-class="none" :url="'../goods/index?goods_id=' + item.goods_id">
									<view class="goods-name">
										<text class="twolist-hidden f-30 col-3">{{ item.goods_name }}</text>
									</view>
									<view class="goods-attr dis-flex">
										<text class="col-7 f-24">{{ item.goods_sku.goods_attr }}</text>
									</view>
								</navigator>
								<view class="dis-flex flex-x-between m-top20">
									<view class="wx-goods_price dis-flex flex-y-center">
										<text v-if="item.is_user_grade" class="dish-item-money">￥{{ item.grade_goods_price }}</text>
										<text v-else class="dish-item-money">￥{{ item.goods_price }}</text>
									</view>
									<!-- 数量选择器 -->
									<view class="selectNumber">
										<button @tap="onSubCount" class="default" :class="{ 'default-active': !item.total_num > 1 }" :data-index="index" :data-sku-id="item.goods_sku_id" type="default">-</button>
										<input :disabled="true" type="number" v-model="item.total_num" />
										<button @tap="onAddCount" class="default" :data-index="index" :data-sku-id="item.goods_sku_id" type="default">+</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cart-tab-wrp">
					<view class="cart-item-total cart-tab-item dis-flex flex-y-center">
						<view class="checked-all">
							<label @tap="onCheckedAll" class="radio dis-flex flex-y-center">
								<radio class="margin-right: 10rpx;" :checked="checkedAll" color="#ff495e"></radio>
								<text class="f-28">全选</text>
							</label>
						</view>
						<view v-if="action === 'complete'" class="cart-item-total-price dis-flex">
							<text class="f-28 col-m">合计：￥{{ cartTotalPrice }}</text>
						</view>
					</view>
					<view class="cart-tab-item_1">
						<view v-if="action === 'complete'" @tap="submit" class="cart-tab-item-btn">去结算</view>
						<view v-if="action === 'edit'" @tap="onDelete" class="cart-tab-item-btn">删除</view>
					</view>
				</view>
			</view>
			<view v-else>
				<view class="yoshop-notcont">
					<text class="iconfont icon-wushuju"></text>
					<block v-if="!isLogin">
						<text class="cont">登录后才可以查看购物车哦</text>
						<view @tap="goLogin" class="flow-btn-min">去登录</view>
					</block>
					<block v-else>
						<text class="cont">亲，购物车还没有商品哦</text>
						<view @tap="goShopping" class="flow-btn-min">去购物</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Route from '@/utils/Route.js';
import Tools from '@/utils/Tools.js';
export default {
	data() {
		return {
			goods_list: [],
			order_total_price: 0,
			action: '',
			checkedAll: false,
			cartTotalPrice: 0
		};
	},
	onShow() {
		this.isLogin = Tools.checkIsLogin();
		if (this.isLogin) {
			this.getCartList();
		}
	},
	methods: {
		getCartList() {
			this.$get(this.$api.getCart, {}, res => {
				this.initGoodsChecked(res.data);
			});
		},
		initGoodsChecked(data) {
			let checkedData = this.getCheckedData();
			data.goods_list.forEach(item => {
				item.checked = Tools.inArray(`${item.goods_id}_${item.goods_sku_id}`, checkedData);
			});
			this.goods_list = data.goods_list;
			this.order_total_price = data.order_total_price;
			this.action = 'complete';
			this.checkedAll = checkedData.length == data.goods_list.length;

			// 更新购物车已选商品总价格
			this.updateTotalPrice();
		},
		/**
		 * 选择框选中
		 */
		onChecked(e) {
			let index = e.currentTarget.dataset.index;
			let goods = this.goods_list[index];
			let checked = !goods.checked;
			// 选中状态
			this.$set(this.goods_list[index], 'checked', checked);
			// 更新选中记录
			this.onUpdateChecked();
			// 更新购物车已选商品总价格
			this.updateTotalPrice();
			// 更新全选状态
			this.checkedAll = this.getCheckedData().length == this.goods_list.length;
		},
		/**
		 * 选择框全选
		 */
		onCheckedAll(e) {
			let goodsList = this.goods_list;
			// 更新商品选中记录
			goodsList.forEach(item => {
				item.checked = !this.checkedAll;
			});
			this.goods_list = goodsList;
			this.checkedAll = !this.checkedAll;
			// 更新购物车已选商品总价格
			this.updateTotalPrice();
			// 更新选中记录
			this.onUpdateChecked();
		},
		/**
		 * 切换编辑/完成
		 */
		switchAction(e) {
			this.action = e.currentTarget.dataset.action;
		},
		/**
		 * 删除商品
		 */
		onDelete() {
			let cartIds = this.getCheckedIds();
			if (!cartIds.length) {
				Tools.showError('您还没有选择商品');
				return false;
			}
			console.log(cartIds);
			uni.showModal({
				title: '提示',
				content: '您确定要移除选择的商品吗?',
				success: e => {
					e.confirm &&
						this.$post(this.$api.delCart, { goods_sku_id: cartIds }, res => {
							this.onDeleteEvent(cartIds);
							// 获取购物车列表
							this.getCartList();
						});
				}
			});
		},
		getCheckedData() {
			let checkedData = uni.getStorageSync('checkedData');
			return checkedData ? checkedData : [];
		},
		/**
		 * 更新购物车已选商品总价格
		 */
		updateTotalPrice() {
			let cartTotalPrice = 0;
			this.goods_list.forEach(item => {
				if (item.checked === true) {
					cartTotalPrice = this.mathadd(cartTotalPrice, item.total_price);
				}
			});
			this.cartTotalPrice = Number(cartTotalPrice).toFixed(2);
		},
		/**
		 * 加法
		 */
		mathadd(arg1, arg2) {
			return (Number(arg1) + Number(arg2)).toFixed(2);
		},
		/**
		 * 减法
		 */
		mathsub(arg1, arg2) {
			return (Number(arg1) - Number(arg2)).toFixed(2);
		},
		/**
		 * 更新商品选中记录
		 */
		onUpdateChecked() {
			let checkedData = [];
			this.goods_list.forEach(item => {
				if (item.checked == true) {
					checkedData.push(`${item.goods_id}_${item.goods_sku_id}`);
				}
			});
			uni.setStorageSync('checkedData', checkedData);
		},
		/**
		 * 获取已选中的商品
		 */
		getCheckedIds() {
			let arrIds = [];
			this.goods_list.forEach(item => {
				if (item.checked === true) {
					arrIds.push(`${item.goods_id}_${item.goods_sku_id}`);
				}
			});
			return arrIds;
		},
		/**
		 * 商品删除事件
		 */
		onDeleteEvent(cartIds) {
			cartIds.forEach(cartIndex => {
				this.goods_list.forEach((item, goodsIndex) => {
					if (cartIndex == `${item.goods_id}_${item.goods_sku_id}`) {
						this.goods_list.splice(goodsIndex, 1);
					}
				});
			});
			// 更新选中记录
			this.onUpdateChecked();
			return true;
		},
		/**
		 * 递增指定的商品数量
		 */
		onAddCount(e) {
			let index = e.currentTarget.dataset.index;
			let goodsSkuId = e.currentTarget.dataset.skuId;
			let goods = this.goods_list[index];
			// order_total_price = _this.data.order_total_price;
			// 后端同步更新
			wx.showLoading({
				title: '加载中',
				mask: true
			});
			this.$post(
				this.$api.addCart,
				{
					goods_id: goods.goods_id,
					goods_num: 1,
					goods_sku_id: goodsSkuId
				},
				() => {
					this.getCartList();
				},
				null,
				() => {
					wx.hideLoading();
				}
			);
		},
		/**
		 * 递减指定的商品数量
		 */
		onSubCount(e) {
			let index = e.currentTarget.dataset.index;
			let goodsSkuId = e.currentTarget.dataset.skuId;
			let goods = this.goods_list[index];
			if (goods.total_num > 1) {
				// 后端同步更新
				wx.showLoading({
					title: '加载中',
					mask: true
				});
				this.$post(
					this.$api.subCart,
					{
						goods_id: goods.goods_id,
						goods_sku_id: goodsSkuId
					},
					() => {
						this.getCartList();
					},
					null,
					() => {
						wx.hideLoading();
					}
				);
			}
		},
		/**
		 * 购物车结算
		 */
		submit() {
			let cartIds = this.getCheckedIds();
			if (!cartIds.length) {
				Tools.showError('您还没有选择商品');
				return false;
			}
			uni.navigateTo({
				url: '/pages/flow/checkout?order_type=cart&cart_ids=' + cartIds
			});
		},
		/**
		 * 去购物
		 */
		goShopping() {
			Route.navigateTo({
				url: '/pages/index/index'
			});
		},
		/**
		 * 去登录
		 */
		goLogin() {
			Route.navigateTo({
				url: '/pages/login/index'
			});
		}
	}
};
</script>

<style>
.image {
	width: 100%;
	height: 100%;
}

.cart-edit-wrap {
	padding: 15rpx;
}

.cart-tab-item-btn {
	width: 160rpx;
	display: block;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 30rpx;
	background: linear-gradient(to right, #fa1e8c 0, #fc1e56 100%);
	color: #fff;
	float: right;
	text-align: center;
}

.cart-tab-item {
	width: 75%;
}
.cart-tab-item_1 {
	width: 25%;
}
.cart-tab-wrp {
	height: 100rpx;
	position: fixed;
	bottom: var(--window-bottom);
	background: #fff;
	border-top: 1rpx solid #ddd;
	display: flex;
	flex-direction: row;
	width: 100%;
	z-index: 10;
	color: black;
}

.cart-tab-item {
	overflow: hidden;
	/* line-height: 100rpx; */
}

.cart-tab-item .cart-item-total-price {
	/* float: left; */
}

.cart-item-total {
	padding-left: 30rpx;
}

.cart-item-total-price {
	/* color: #ff495e; */
	/* text-align: center; */
	margin-left: 15rpx;
}

.cart-item-total-price em {
	display: block;
}

.cart-item-icon-wrp {
	width: 110rpx;
	height: 90rpx;
	position: absolute;
	top: -4rpx;
}

.cart-item-icon {
	width: 90rpx;
	height: 90rpx;
}

.dish-item {
	width: 100%;
	padding: 26rpx 20rpx;
	border-bottom: 1rpx solid #eee;
	position: relative;
	background: #fff;
	box-sizing: border-box;
}

.dish-item-radio {
	padding: 20rpx 0;
}

.dish-item-wrp {
	flex-direction: row;
}

.dish-item-pic {
	width: 100%;
	margin-left: 12rpx;
}

.dish-item-pic image {
	width: 180rpx;
	height: 180rpx;
	margin: 0 auto;
	background: #fff;
	border: 1rpx solid #eee;
}

.dish-item-info {
	padding-left: 16rpx;
	/* margin-right: 15px; */ /* width: 68%; */
}

.dish-item-info .goods-name {
	height: 80rpx;
}

.dish-item-sales {
	color: #ccc;
	font-size: 20rpx;
	line-height: 50rpx;
}

.dish-item-money {
	color: #ff495e;
	font-size: 32rpx;
	/* padding: 0 0 10rpx 0; */
}

.wx-goods_price {
	overflow: hidden;
}

.flow-dete {
	position: absolute;
	bottom: 25rpx;
	right: 30rpx;
}

.flow-dete .icon-lajixiang {
	color: #777;
	font-size: 34rpx;
}

.flow-btn-min {
	background: #fff;
	border: 1rpx solid #ccc;
	height: 30px;
	line-height: 30px;
	font-size: 28rpx;
	width: 200rpx;
	margin: 0 auto;
	border-radius: 5px;
	text-align: center;
	color: #777;
	margin-top: 25rpx;
}
</style>
